<link rel="stylesheet" href="assets/common/plugins/umeditor/themes/default/css/umeditor.css">
<style>
    .am-form-label{
        text-align: left!important;
    }
    .question-group{
        /* border: 1px solid #999; */
        border-radius: 10px;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);

        display: flex;
        flex-direction: column;
        /* align-items: flex-end; */
        padding:10px;
    }

    .add-option-button{
        float: right;
        margin-right: 10px;
    }

    .options-list{
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .option-item{
        /* align-self: stretch; */
        border: 1px dotted #999;
        margin: 10px;
        padding: 10px;
        border-radius: 10px;
    }
</style>
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <form id="my-form" class="am-form tpl-form-line-form" method="post">
                    <div class="widget-body">
                        <fieldset>
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">编辑问卷</div>
                            </div>
                            <!-- 问卷标题 -->
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">问卷标题 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="survey[title]"
                                           value="<?= $model['title'] ?>" required>
                                </div>
                            </div>
                            <input type="hidden" name="survey[wxapp_id]" value="<?= $model['wxapp_id'] ?>">
                            <!-- <input type="hidden" name="survey[id]" value="<?= $model['id'] ?>"> -->
                            <!-- 问卷描述 -->
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label">问卷描述 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="survey[description]" 
                                           value="<?= $model['description'] ?>">
                                </div>
                            </div>

                            <!-- 问卷问题 -->
                            <div id="question-list">
                                <?php foreach ($model['questions'] as $index => $question): ?>
                                    <?php if ($question['is_delete'] == 1) continue; ?> <!-- 过滤已删除的问题 -->
                                    <div class="am-form-group question-group" data-question="<?= $index ?>">
                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">
                                                问题 <?= $index + 1 ?>
                                            </label>
                                            <div class="am-u-sm-9 am-u-end">
                                                <input type="hidden" name="questions[<?= $index ?>][id]" 
                                                    value="<?= $question['id'] ?>">
                                                <input type="hidden" name="questions[<?= $index ?>][is_delete]" value="0"> <!-- 默认为0，点击删除时改为1 -->
                                                <input type="text" name="questions[<?= $index ?>][question_text]" 
                                                    value="<?= $question['question_text'] ?>" required>
                                                <select name="questions[<?= $index ?>][type]" onchange="toggleOptions(this, <?= $index ?>)">
                                                    <option value="选择" <?= $question['type'] === '选择' ? 'selected' : '' ?>>选择</option>
                                                    <option value="填写" <?= $question['type'] === '填写' ? 'selected' : '' ?>>填写</option>
                                                    <option value="单选" <?= $question['type'] === '单选' ? 'selected' : '' ?>>单选</option>
                                                    <option value="多选" <?= $question['type'] === '多选' ? 'selected' : '' ?>>多选</option>
                                                </select>
                                                <!-- 删除问题按钮 -->
                                                <button type="button"
                                                        onclick="deleteQuestion(<?= $index ?>)" style="float: right;">删除问题</button>
                                            </div>
                                        </div>
                                        
                                        <!-- 是否必填 -->
                                        <div class="am-u-sm-9 am-u-end" style="margin-top: 5px;">
                                            <label>
                                                <input type="checkbox" name="questions[<?= $index ?>][is_required]" 
                                                       value="1" <?= $question['is_required'] ? 'checked' : '' ?>>
                                                是否必填
                                            </label>
                                        </div>
                                        <!-- 问题选项 -->
                                        <?php if ($question['type'] === '单选' || $question['type'] === '多选'): ?>
                                            <div class="option-item" id="options-<?= $index ?>" style="margin-top: 10px;">
                                                <?php foreach ($question['options'] as $optIndex => $option): ?>
                                                    <?php if ($option['is_delete'] == 1) continue; ?> <!-- 过滤已删除的选项 -->
                                                    <div class="am-form-group option-group">
                                                        <input type="hidden" name="questions[<?= $index ?>][options][<?= $optIndex ?>][id]" 
                                                               value="<?= $option['id'] ?>">
                                                        <input type="hidden" name="questions[<?= $index ?>][options][<?= $optIndex ?>][is_delete]" value="0"> <!-- 默认为0 -->
                                                        <input type="text" name="questions[<?= $index ?>][options][<?= $optIndex ?>][option_text]" 
                                                               value="<?= $option['option_text'] ?>" required>
                                                        <button
                                                                onclick="deleteOption(this)" style="float: right;">删除选项</button>
                                                    </div>
                                                <?php endforeach; ?>
                                                <!-- 添加选项按钮 -->
                                                <button type="button"
                                                        onclick="addOption(<?= $index ?>)">添加选项</button>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                            <div id="question-list">
                                <!-- 动态生成的问题将插入到这里 -->
                            </div>
                            <!-- <button type="button" id="add-question" class="am-btn am-btn-primary">添加问题</button> -->
                            <!-- 添加问题按钮 -->
                            <button type="button" class="am-btn am-btn-primary am-btn-sm" onclick="addQuestion()">添加问题</button>
                            <!-- 提交按钮 -->
                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                    <button type="submit" class="j-submit am-btn am-btn-secondary">提交</button>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    let questionIndex = <?= count($model['questions']) ?>;

    function toggleOptions(select, questionId) {
        const optionsContainer = document.getElementById(`options-${questionId}`);
        optionsContainer.style.display = (select.value === '单选' || select.value === '多选') ? 'block' : 'none';
    }

    function addQuestion() {
        const questionHtml = `
            <div class="am-form-group question-group" data-question="${questionIndex}">
                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">问题 ${questionIndex + 1}</label>
                <div class="am-u-sm-9 am-u-end">
                    <input type="text" name="questions[${questionIndex}][question_text]" required>
                    <select name="questions[${questionIndex}][type]" onchange="toggleOptions(this, ${questionIndex})">
                        <option value="选择">选择</option>
                        <option value="填写">填写</option>
                        <option value="单选">单选</option>
                        <option value="多选">多选</option>
                    </select>
                    <button type="button" onclick="deleteQuestion(${questionIndex})">删除问题</button>
                    <input type="hidden" name="questions[${questionIndex}][is_delete]" value="0">
                </div>
                <div id="options-${questionIndex}" style="margin-top: 10px; display: none;">
                    <button type="button" class="am-btn am-btn-secondary am-btn-xs" onclick="addOption(${questionIndex})">添加选项</button>
                </div>
            </div>`;
        document.getElementById('question-list').insertAdjacentHTML('beforeend', questionHtml);
        questionIndex++;
    }

    let optionIndex = 0; // 在全局范围内定义一个计数器

    function addOption(questionId) {
        const optionHtml = `
            <div class="am-form-group option-group">
                <input type="text" name="questions[${questionId}][options][${optionIndex}][option_text]" required>
                <input type="hidden" name="questions[${questionId}][options][${optionIndex}][is_delete]" value="0">
                <button type="button" onclick="deleteOption(this)">删除选项</button>
            </div>`;
        document.getElementById(`options-${questionId}`).insertAdjacentHTML('beforeend', optionHtml);
        optionIndex++; // 确保每次调用都递增
    }

    function deleteQuestion(questionId) {
        const questionGroup = document.querySelector(`.question-group[data-question="${questionId}"]`);
        questionGroup.querySelector('input[name="questions[' + questionId + '][is_delete]"]').value = "1"; // 标记删除
        questionGroup.style.display = "none";
    }

    function deleteOption(button) {
        const optionGroup = button.parentElement;
        optionGroup.querySelector('input[name$="[is_delete]"]').value = "1"; // 标记删除
        optionGroup.style.display = "none";
    }

    $(function () {
        $('#my-form').superForm();
    });
</script>